<template>
	<view>
		<view>
			<uni-list>
				<uni-list-item v-for="(item, index) in dataList" :key="index" :show-extra-icon="true" showArrow
					:title="item.title" clickable="true" :extra-icon="extraIcon" :note="item.dataTime" 
					@click="jump(item.orderId)"/>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				extraIcon: {
					color: '#409EFF',
					size: '40',
					type: 'email-filled'
				},
			}
		},
		methods: {
			getTodoList() {
				uni.request({
					url: "http://localhost:8088/getTodoUndoneList?userId=" + localStorage.getItem("userId"),
					method: "GET",
					success: (res) => {
						if (res.data && res.data.code === '0') {
							const todoList = res.data.data;
							console.log(this.todoList);
			
							// Filter todo items based on conditions
							this.dataList = todoList
								.filter(item => item.todoType === '用车通知' && item.todoStatus === '未完成')
								.map(item => ({
									title: '您有一条用车通知待查看',
									dataTime: item.todoTime,
									orderId: item.orderId,
									// Other properties according to your needs
								}));
						} else {
							console.error('Error fetching data. Server response:', res);
						}
					},
					fail: (error) => {
						console.error('Error fetching data:', error);
					}
				});
			},
			jump(orderId) {
				uni.navigateTo({
					url: "/pages/autoApplicationInfo/autoApplicationInfo?orderId=" + orderId
				})
			},
		},
		created(){
			this.getTodoList();
		}
	}
</script>

<style lang="scss">
	.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 10px;
		width: 30px;
		height: 30px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}
</style>